/*手机端的简单适配*/

// 手机端    576px
// d-down-none  手机端隐藏  
// d-sm-none    手机端显示        大于手机端隐藏 
div{
  box-sizing: border-box;
}

$base_width:750;
$base_font:100;

.ft18{
    font-size:18px !important;
}
.ft16{
    font-size:16px !important;
}
  
// 量出 多少 除以 75  
@function rem($px){
    @return  ($px/$base_font)  * 1rem; 
}


@media (max-width: 750.01px){
    // 设置 rem
    html {
        font-size:-webket-calc(100vw/7.5) !important;   // 设计稿宽度  750px 
        font-size:calc(100vw/7.5) !important; 
    }
    .appshow{
        display: block ;
    }
    .apphide{
        display: none ;
    }

    .page{
        padding-top:50px;
    }

    .w1200{
        width:100% !important;
    }
    
    .bigbox{
        width:100%;
        height:rem(450) !important;
        padding:0;
        .bigboxall{
            height:rem(450) !important;
            .bigboximg{
                height:rem(450) !important;
            }
        }
    }


    .news{
      .newbox{
        .nmain{
          flex-direction: column;
          align-items: center;
          .leftimg{
            width:100%;
          }
          .rightbox{
            margin:20px 0 0 0;
            width:100%;
            padding:30px 20px 10px;
          }
        }
      }

      .newboxtwo{
        .twobox{
          width:100%;
          padding:25px;
          .imgs{
            flex-direction: column;
            .img{
              width:100%;
              margin-top:15px;
            }
          }
        }
      }
    }

    .personal{
      .pbox{
        flex-direction: column;
        padding:0 20px;
        margin:50px auto;
        width:100%;
        height:auto;
        max-height: 900px !important;
        .imgone{
          width:100%;
          display: none;
        }
        .imgapp{
          width:100%;
          margin-bottom:20px;
        }
        .pboxone{
          width:100%;
          height:260px;
          padding:30px 10px;
          .ptext{
            width:100% !important;
            text-indent: 0;
          }
        }
      }
    }
    .home{
      &-one{
        .home-box1{
          .topbox1{
            flex-direction: column;
            margin-top:20px;
            .left{
              margin-right:10px;
              text-align: center;
              .about{
                width:100%;
                margin:0;
              }
              .h2{
                width:100%;
                margin:30px 0 0 0 ;
              }
            }
            .right{
              width:100%;
              margin-top:20px;
            }
          }
          .qiyewen{
            margin-top:50px;
            .honeimg{
              margin-top:40px;
              width:100%;
              position: relative;
              padding-top:0;
              height:rem(165);
              img{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:rem(165);
              }
            }
            .htext{
              font-size:16px;
            }
            .btext{
              margin-top:55px;
              font-size:16px;
            }
          }
        }
      }
      &-two{
        height:rem(445);
        padding:0;
        &-box{
          width:rem(690);
          height:rem(315);
        }
      }
    }

    .advance{
      .ad-two{
        padding: 30px 0;
        .items{
          flex-direction: column;
          .ad-two-item{
            margin-top:30px;
            .text{
              font-size: 12px;

            }
          }
        }
        .xiaimg{
          width:rem(690);
          height:rem(225);
          margin:40px auto 0;
        }
      }
    }
    // 企业介绍
    // 产品
    .intro{
      .probox{
          padding:40px 0;
          .proboxmain{
              .nav{
                   width:rem(140) !important;
                   margin-right:10px;
                   .nav-box{
                      .navtop{
                        height:rem(90);
                        padding: rem(10);
                        cursor: pointer;
                        .title{
                          font-size: rem(24);
                          margin-top:rem(15);
                          padding: 0 0 rem(8) rem(8);
                          border-bottom:rem(2) solid #333;
                        }
                      }
                      .navlist{
                          width:100%;
                          .navitem{
                            width:100%;
                            height:rem(80);
                            padding:0 rem(0) 0 rem(0);
                            line-height:rem(80);
                            font-size: 10px;
                            text-align: center;
                            line-height: rem(80) ;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .arrow{
                                display: none;
                            }
                          }
                      }
                  }
              }
              .content{
                 padding-right:10px;
              }
          }
      }
    }

    // 产品
    .product{
        .probox{
            padding:40px 0;
            .proboxmain{
                // padding-right:rem(14);
                .nav{
                     width:rem(140) !important;
                     margin-right:10px;
                     .nav-box{
                        .navtop{
                          height:rem(90);
                          padding: rem(10);
                          cursor: pointer;
                          .title{
                            font-size: rem(24);
                            margin-top:rem(15);
                            padding: 0 0 rem(8) rem(8);
                            border-bottom:rem(2) solid #333;
                          }
                        }
                        .navlist{
                            width:100%;
                            .navitem{
                              width:100%;
                              height:rem(80);
                              padding:0 rem(0) 0 rem(0);
                              line-height:rem(80);
                              font-size: 10px;
                              text-align: center;
                              line-height: rem(80) ;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              .arrow{
                                  display: none;
                              }
                            }
                        }
                    }
                }
                .content{
                    .cbox2{
                         padding:20px 10px !important;
                    }
                    .cbox3{
                         padding:20px 10px !important;
                         .three{
                            .imglist{
                              .imgitem{
                                img{
                                  width: 115px;
                                  height:115px;
                                }
                                p{
                                    font-size: 10px;
                                    padding:0 5px;
                                }
                              }
                            }
                        }
                    }
                    .cbox4{
                         padding:20px 10px !important;
                         .cblist{
                            .cbitem{
                                a{
                                    .timg{
                                        width:100%;
                                        height:80%;
                                    }
                                }

                            }
                        }
                    }
                }
            }
        }
        .showbox{
            .el-dialog{
              width:94%;
            }
            .showbox-main{
              width:100%;
              height:auto;
              padding:10px;
              .stitle{
                font-size: 12px;
                line-height: 20px;
              }
              .simg{
                width:100%;
                height:370px;
                margin:10px auto 0;
              }
            }
          }
    }

    .company{
        .comteo{
            height:auto;
            &-box{
              padding:40px 0 40px 0;
               .title{
                font-size: 20px;
              }
              .logos{
                width:rem(625);
                height:rem(883);
                margin:35px  auto 0;
              }
          }
        }
    }

    .contactus{
        .contactus-box{
            padding:20px;
            .form{
                width:100%;
                .conitem{
                    margin-bottom: 20px;
                    margin-top:10px;
                    display: flex;
                    flex-direction: column;
                    .xu{
                        font-size: 14px;
                    }
                    .sub{
                      font-size: 12px;
                    }
                }
                .advise{
                    height:300px;
                    line-height: 14px;
                    margin-top:0;
                }
            }   
            .submit-btn{
                width:100%;
            }
        }
    }

    // 底部footer 
    .footer{
        height:auto !important;
        .foot-box{
            padding:20px 15px;
            height:auto;
            background: url(../assets/images/footimg.png) 0 0 no-repeat;
            background-size: cover;
            .ftlogo1{
                width:200px;
                height:32px;
            }
            .foot-main{
                .foot-one{
                    margin-top: 0;
                    .foot-qrcode{
                        width:60px;
                        height:75px;
                        top:65px;
                        .qrcode{
                            width:60px;
                            height:60px;
                        }
                        .wx{
                            margin-top:4px;
                            font-size: 8px;
                        }
                    }
                    .contact{
                        width:100%;
                        text-align: center;
                        font-size: 18px;
                    }
                    .ftitem{
                        .fttext{
                            margin-left: 15px;
                            font-size: 14px;
                        }
                    }
                }
                .ftlist{
                    margin-top:12px;
                    justify-content: center;
                    .hitem{
                      margin:0 10px;
                    }
                }
            }
        }
        .foot-info{
            flex-direction: column;
            height:auto;
            padding:10px 0;
            .ftlogo{
                margin:0;
            }
            .righttext{
                padding:0 !important;
                margin-top:10px;
                border-left:none;
                text-align: center;
                .ban{
                    margin:0;
                }
                .copy{
                    display: flex;
                    flex-direction: column;
                }
                .bei{
                    margin-left:0px;
                }
            }
        }
    }


    .swal2-popup{
        padding:rem(26);
        .swal2-title{
            font-size:18px;
        }
        .swal2-content{
            font-size: 14px;
        }
        .swal2-actions{
            margin:20px auto 0;
            .swal2-confirm{
                font-size: 16px;
            }
        }
    }
}


@media (min-width: 750.01px){
    .appshow{
        display: none ;
    }
    .apphide{
        display: block ;
    }
}



// 隐藏
@media (min-width: 768.02px) {
    .ipad-hide{
        display: block !important;
    }
    .ipad-show{
        display: none !important;
    }
}



// ipad 以下 apply  
@media (max-width: 768.01px) {
    .ipad-hide{
        display: none !important;
    }
    .ipad-show{
        display: block !important;
    }
    .w1200{
        width:80%;
    }

    .header{
        .head-box{
          .himg{
            margin-right:20px;
          }
          .links{
            padding-right:10px;
            .hitem{
              margin:0 15px;
            }
          }
        }
    }
    

    .advance{
      .ad-two{
        .items{
          .ad-two-item{
            .text{
              font-size: 12px;
            }
          }
        }
      }
    }
    
}

@media (min-width: 750.01px) and (max-width: 767.99px){
   
}


@media (min-width: 575.98px) and (max-width: 767.98px) {
    .slide-item-left{
        display: none !important;
    }
    .bannerswiper{
        width:100% !important; 
    }
}


// ipad   768   
@media (min-width: 767.98px) and (max-width: 1023.98px) {

}

// ipad pro 1024 
@media (min-width: 1024px) and (max-width: 1036.98px) {
    .ipadnone{
        display: none !important;
    } 
}

@media (max-width:1424px){
    
}
@media (max-width:1324px){
  .personal{
    .pbox{
      .imgone{
        height:335px;
      }
      .pboxone{
        height: 420px;
        padding:20px 50px;
        .ptext{
          width:220px;
        }
      }
    }
  }

  .intro{
    .probox{
        .proboxmain{
            .nav{
                width:200px;
            }
            .content{
                .cbox2{
                    padding:20px;
                }
                .cbox3{
                    padding:20px;
                }
                .cbox4{
                    padding:20px;
                }
            }
        }
    }
  }
   .product{
       .probox{
           .proboxmain{
               .nav{
                    width:200px;
               }
               .content{
                   .cbox2{
                        padding:20px;
                   }
                   .cbox3{
                        padding:20px;
                   }
                   .cbox4{
                        padding:20px;
                   }
               }
           }
       }
   }
}
@media (max-width:1224px){
  .personal{
    .pbox{
      .imgone{
        height:305px;
      }
      .pboxone{
        height: 390px;
        padding:20px 50px;
        .ptext{
          width:200px;
        }
      }
    }
  }
  .advance{
    .ad-two{
      .items{
        .ad-two-item{
          .text{
            font-size: 13px;
          }
        }
      }
    }
  }
}
@media (max-width:1124px){
  .personal{
    .pbox{
      .imgone{
        height:275px;
      }
      .pboxone{
        height: 360px;
        padding:20px 50px;
        .ptext{
          width:170px;
        }
      }
    }
  }
  .home{
    &-one{
      .home-box1{
        .topbox1{
          .right{
            padding:10px 15px;
            font-size:12px;
          }
        }
      }
    }
  }
}


// ipad pro
@media (max-width:1024px){
  .personal{
    .pbox{
      .imgone{
        height:245px;
      }
      .pboxone{
        height: 320px;
        padding:20px 40px;
        .ptext{
          width:170px;
        }
      }
    }
  }

    .w1200{
        width:85%;
    }

  
    
    .footer{
        .foot-info{
            .righttext{
                padding:0 10px 0 45px;
            }
        }
    }
}

@media (max-width:1100px){
  .header{
    .head-box{
      .himg{
        margin-right:20px;
      }
      .links{
        padding-right:10px;
        .hitem{
          margin:0 10px;
        }
      }
    }
  }
}




@media (max-width:950px){
  .news{
    .newbox{
      .nmain{
        flex-direction: column;
        align-items: center;
        .rightbox{
          margin:20px 0 0 0;

        }
      }
    }

    .newboxtwo{
      .twobox{
        width:100%;
      }
    }
  }

  .header{
    .head-box{
      padding:0 5px;
      .himg{
        margin-right:6px;
        width: 150px;
        height:27px;
      }
      .links{
        padding-right:0px;
        .hitem{
          margin:0 8px;
        }
      }
    }
  }
}



@media (max-width: 768px){
  .personal{
    .pbox{
      .imgone{
        height:205px;
      }
      .pboxone{
        height:260px;
        padding:30px 10px;
        .ptext{
          width:190px;
        }
      }
    }
  }


  .header{
    .head-box{
      padding:0 5px;
      .himg{
        margin-right:6px;
        width: 120px;
        height:21px;
      }
      .links{
        padding-right:0px;
        .hitem{
          margin:0 5px;
        }
      }
    }
  }
  
}

